
<template>
  <div class="shop-cart">
     <group>
       <cell-box class="shop-cart-item" v-for="obj in list" :key="obj.id" :data-id="obj.id">
         <div class="left">
             <img :src="obj.goods.img" alt="" class="pic">
             <span class="title">{{obj.goods.title}}</span>
         </div>
          <div class="right">
              <span class="price">{{obj.goods.price*obj.count}}</span>
              <span class="cut" @click="cut(obj)">-</span>
              <span class="amount">{{obj.count}}</span>
              <span class="add" @click="add(obj)">+</span>
              <button @click="del(obj)">删除</button>
          </div>
           <div class="clear"></div>
       </cell-box>
     </group>
     <div id="total">
        <h2 class="tNum">商品总数：{{totalNum}}  件</h2>
        <h2 class="tPrice">商品总价：{{totalPrice}}  ￥</h2>
     </div>
     <x-button type="primary" class="btn" @click.native="Sub()">提交订单</x-button>
  </div>
</template>
<script>
import Cookies from 'js-cookie';
import { Group, CellBox,XButton } from 'vux';
import { getShopCart,addToShopCart,removeGood} from '../utils/shop_cart';
import {getGoodsData} from '../service/goods'
import $ from 'jquery'
export default {
  name: 'ShopCart',
  components:{
    Group,
    CellBox,
    XButton
  },
  data(){
    return {
      list: [] ,// 购物车中商品信息
    }
  },
  methods:{
    add(obj){
      addToShopCart(obj.id,1);
      this.$eventBus.$emit('addToShopCart',obj);
      this.init();
    },
    init(){
      this.list = [];
      let ShopCarts = getShopCart(); // 获取购物数据
      let allgoods = getGoodsData(); // 获取所有的商品数据
      ShopCarts.forEach((item) => {
      let gItem = allgoods.find((g) => {
        return g.id == item.id;
      })
      let obj = {};
      obj.goods = gItem;
      obj.id = item.id;
      obj.count = item.count;
      this.list.push(obj);
     })
    },
    // 减少
    cut(obj){
      if(obj.count>0){
        addToShopCart(obj.id,-1);
        this.$eventBus.$emit('addToShopCart',obj);
        this.init();
      }
    },
    // 删除
    del(obj){
        var id = obj.id;
        removeGood(id);
        // this.$eventBus.$emit('addToShopCart',obj);
        this.init();
    },
    Sub(){
      if(this.totalNum != 0){
        var total = this.list;
        this.$router.push({
          name: 'Order',
          query:{
            totalNum:this.totalNum,
            totalPrice:this.totalPrice
          }
        })
      }
    }
  },
  computed:{
        totalNum(){
            var all = 0;
            this.list.forEach(function(item){
                all+=item.count;
            })
            return all;
        },
        totalPrice(){
            var all = 0;
            this.list.forEach(function(item){
                all+=item.count*item.goods.price;
            })
            return all;
        },
    },

  created(){
    this.init();
  },

};
</script>
<style>
.clear{
  clear:both;
}
.shop-cart-item .left{
  width: 100px;
}
.shop-cart{
  margin-bottom: 50px;
}
.shop-cart-item .left .pic{
  width: 50px;
}
.shop-cart-item .left span{
  display: block;
}
.shop-cart-item .right .price {
  font-size: 14px;
  color: orangered;
}
.shop-cart-item .left .title{
  font-size: 12px;
}
.shop-cart-item .right .cut,.add{
  display: inline-block;
  width: 20px;
  height: 20px;;
  border-radius: 50%;
  font-size: 14px;
  line-height: 20px;
  background: green;
  text-align: center;
  cursor: pointer;
  color: white;
}
button {
  border:none;
  background: red;
  color:white;
  padding: 0 10px;
}
.shop-cart-item .right{
   width: 200px;
   display: flex;
   justify-content: space-between;
   float:right;
}
.shop-cart-item .right .amount{
  border:1px solid black;
  padding: 2px;
  font-size: 14px;
  color: white;
  background: #333;
}
#total{
  width: 100%;
  background: lightgreen;
  border-radius: 5px;
}
.tNum,.tPrice{
  width: 100%;
  color: orangered;
  text-align: left;
  font-size: 15px
}
</style>


